<template>
	<div class='text-right'>
		<a-divider orientation="left">首页轮播图展示设置（未登录用户）</a-divider> 
		<a-button class='mb10' @click='add_swiper_un' icon="edit">新增</a-button> 
		<a-table :columns="columns_swiper_unlogin" :dataSource="data_swiper_un"  :pagination='false' :rowKey="record => record.code" >
 			<div slot='imageFileCode' slot-scope='text,record' >   
			    <a-card hoverable style="width:100px;height: 100px;" @click='imgGrow(text)'>
				    <img alt="example" :src='imgurlAddress(text)' slot="cover" /> 
				</a-card>
 			</div>
 			<span slot='createTime' slot-scope='text,record'>
 				{{text | formatDate}}
 			</span>
	        <span slot="action" slot-scope="text, record"> 
	        	<a href="javascript:;"  @click='edit_swiper_un(record)' class='color-blue '>编辑</a> 
				<a-divider type="vertical" />
				<a-popconfirm title="确认删除当前数据？" @confirm="Del_swiper_un(record.code)"   okText="确认" cancelText="取消">
				  <a href="javascript:;"  class='color-red'>删除</a>
				</a-popconfirm>
	        </span>
	    </a-table>

		<a-divider orientation="left">首页轮播图展示设置（已登录用户）</a-divider> 

		<a-divider orientation="left">最新动态板块设置</a-divider>  
		<router-link to='/editActiveImg'><a-button class='mb10'  icon="edit">新增</a-button> </router-link>
		<a-table :columns="columns_theme" :dataSource="data_theme"  :pagination='false' :rowKey="record => record.code" >
 			<div slot='bgImageFileCode' slot-scope='text,record' >   
			    <a-card hoverable style="width:100px;height: 100px;" @click='imgGrow(text)'>
				    <img alt="example" :src='imgurlAddress(text)' slot="cover" /> 
				</a-card>
 			</div>
 			 
 			<span slot='showFlag' slot-scope='text,record'>
 				{{text | showFlag}} <br /> 
 				<span class='link text-underline cursor' @click='modifyFlag_activeImg(record.code,text)'>{{text==1? "下架":"上架"}}</span>
 			</span>
 			<span slot='createTime' slot-scope='text,record'>
 				{{text | formatDate}}
 			</span>
	        <span slot="action" slot-scope="text, record"> 
	        	<router-link :to='{path:"/editActiveImg",query:{code:record.code}}' class='color-blue '>编辑</router-link>
				<a-divider type="vertical" />
				<a-popconfirm title="确认删除当前数据？" @confirm="Del_activeImg(record.code)"   okText="确认" cancelText="取消">
				  <a href="javascript:;"  class='color-red'>删除</a>
				</a-popconfirm>
	        </span>
	    </a-table>
	    <!-- 商品列表设置 -->
	    
		<swiperModal  ref='swiperModal' :visible='showAddSwiper'   v-on:handleCancel='showAddSwiper=false'  v-on:handleOk='swiper_un_finished() '></swiperModal>
		<!-- img放大查看，可写成通用组件 -->
		<a-modal :visible="previewVisible" :footer="null"  @cancel="previewVisible = false">
	        <img alt="example" style="width: 100%" :src="previewImage" />
	    </a-modal>
	</div>
</template>
 
<script >
	import swiperModal from '@/components/minipro/HomeSetting/swiperModal'
	import {
		api_swiperUn_list,del_swiper_un,
		api_theme_list,
		del_activeImg,submit_latest_news 
	} from '@/api/minipro/HomeSetting'
	
	export default{
		name:'HomeSetting',
		data(){
			let columns_swiper_unlogin=[{
		        dataIndex: 'imageFileCode',
		        key: 'imageFileCode',
		        title:'图片', 
		        scopedSlots: { customRender: 'imageFileCode' }, 
		      },  {
		        title: '展示顺序',
		        dataIndex: 'sort',
		         scopedSlots: { customRender: 'sort' },
		      }, {
		        title: 'banner 标题',
		        dataIndex: 'imageTitle',
		      }, {
		        title: 'banner 简介',
		        dataIndex: 'imageText',
		      },  {
		        title: '创建人',
		        dataIndex: 'createUserName',
		      },
		      {
		        title: '创建时间',
		        dataIndex: 'createTime',
		        scopedSlots: { customRender: 'createTime' },
		      },  
		      {
		        title: '操作',
		        key: 'action',
		        scopedSlots: { customRender: 'action' },
		      }]
		      let columns_theme =[{
			        dataIndex: 'bgImageFileCode',
			        key: 'bgImageFileCode',
			        title:'图片', 
			        scopedSlots: { customRender: 'bgImageFileCode' }, 
			      }, 
			      {
			        title: '主题',
			        dataIndex: 'title',
			      },
			      {
			        title: '描述',
			        dataIndex: 'description',
			      },
			      {
			        title: '链接文字',
			        dataIndex: 'btnText',
			      },
			      {
			        title: '状态',
			        dataIndex: 'showFlag',
			        scopedSlots: { customRender: 'showFlag' },
			      },
			      {
			        title: '创建时间',
			        dataIndex: 'createTime',
			        scopedSlots: { customRender: 'createTime' },
			      },
			     {
			        title: '操作',
			        key: 'action',
			        scopedSlots: { customRender: 'action' },
			      }

		      ]

			return {
				columns_swiper_unlogin,
				previewVisible:false,
				previewImage:'',
				data_swiper_un:[
				// {imgsrc:'static/img/11.jpg',order:1,title:'欢迎来到晚峰的榫卯世界',introduce:'注册账号，尊享会员礼遇'}
				],
				showAddSwiper:false,

				data_theme:[],
				columns_theme,
			}
		},
		created(){
			this.pageInit()
		},
		methods:{
			pageInit(){
				this.swiperUnInit()
				this.activeImgInit() 
			},
			swiperUnInit(){
				api_swiperUn_list().then((res)=>{
					if(res.data.flag == true){
						this.data_swiper_un = res.data.dataList
					}
				})
			},
			activeImgInit(){
				api_theme_list().then((res)=>{
					this.data_theme = res.data.dataList
				})
			},

			//swiper_un-modal
			add_swiper_un(){
				this.showAddSwiper = true
				console.log(this.$refs.swiperModal)
				this.$refs.swiperModal.$emit('openDialog') 
			},
			edit_swiper_un(data){
				this.showAddSwiper = true
				this.$refs.swiperModal.$emit('editDialog',data) 
			},
			Del_swiper_un(code){
		      del_swiper_un(code).then((res)=>{
		      	if(res.data.flag == true){
		      		this.$message.success(res.data.msg)
		      		this.pageInit()
		      	}
		      })
		  	},
		  	swiper_un_finished(){
		  		this.showAddSwiper=false
		  		this.pageInit()
		  	},

			//img  src/grow
			imgurlAddress(code){
			 	return   process.env.BASE_API+'/op/fileupload/download_file?fileCode='+code
			},
			imgGrow(code){
				this.previewImage = process.env.BASE_API+'/op/fileupload/download_file?fileCode='+code
				this.previewVisible = true
			},
			/*
				删除某条最新动态
			*/
			Del_activeImg(code){
				del_activeImg(code).then((res)=>{
					if(res.data.flag == true){
			      		this.$message.success(res.data.msg)
			      		this.activeImgInit()
			      	}
				})
			},
			/*
				修改某条动态是否展示
			*/
			modifyFlag_activeImg(code,flag){
				 
				let showFlag = flag == 0 ? 1 : 0
				submit_latest_news('/sys/latest_news/modify_latest_news',{code,showFlag}).then((res)=>{ 
	                    this.$message.success(res.data.msg) 
	                    this.activeImgInit()
	            })
			}
		},	
		components:{
			swiperModal,
		},
		//计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
		computed:{
			
		}
	}
</script>

<style scoped="scoped">
	
</style>